<template>
    <div class="week-date">
        <div class="week-date-item" :class="{ 'self-date': item.dateStr == selfDate }" @click="handleClick(item)"
            v-for="item,key in week">
            <slot name="weekItem" :item="item">
                <div class="week-date-item-day">{{ weekCn[item.day] }}</div>
                <div class="week-date-item-date">{{ item.date }}日</div>
            </slot>
        </div>
    </div>
</template>

<script>
import weekDateFn from './weekdate';
import moment from 'moment';
export default {
    name: 'syx-week-calendar',
    props: {
        date: {
            type: Date,
            default: () => new Date()
        },
    },
    data() {
        return {
            week: [],
            weekCn: {
                1: "星期一",
                2: "星期二",
                3: "星期三",
                4: "星期四",
                5: "星期五",
                6: "星期六",
                7: "星期天",
            },
            selfDate: moment(new Date()).format("YYYY-MM-DD")
        }
    },
    created() {
        this.selfDate = moment(new Date(this.$props.date)).format('YYYY-MM-DD')
        this.week.push(...weekDateFn(this.$props.date));
    },
    watch: {
        '$props.date': {
            handler(newValue, oldValue) {
                console.log(newValue);
                this.selfDate = moment(new Date(newValue)).format('YYYY-MM-DD')
                this.week = [];
                this.week.push(...weekDateFn(newValue));
            },
            deep: true
        },
    },

    methods: {
        handleClick(item) {
            this.$emit('handleClickWeek', item);
        }
    }
}
</script>

<style scoped>
.week-date {
    width: 100%;
    display: flex;


}

.week-date-item {
    flex: 1;
    text-align: center;
    padding: 4px 0px;
    cursor: pointer;


}

.self-date {
    background-color: #ebfff7;
}

.week-date-item-day {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    color: #666;
}

.week-date-item-date {
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    color: #999999;
    font-weight: 600;
}
</style>